<template>
    <div class = "informationaggregation">
        <el-container v-loading = "loading"> 
        <el-container>
        <el-main>
            <div class = "box">
                <div class = "but">
                    <el-button type="primary" round >服务次数 {{serviceCount}}</el-button>
                </div>
            </div>
            <el-row>
            <el-col>
                <el-card shadow="always" style="padding-bottom:20px">
                    <div style="text-align: center;" v-if = "form.length === 0">暂无数据</div>
                    <div v-for = "(item,index) in form" :key="index" class = "boxes">
                    <el-col :span="8">
                        <el-card shadow="hover">
                            <div class = "name-wrapper">
                                <span v-if = "item.role === 'teacher'">教师 : </span>
                                <span v-if = "item.role === 'student'">学生 : </span>
                                <span>{{item.leaderName}}</span>
                            </div>
                            <div class = "endTime-wrapper">
                                <p>结束时间 : {{item.endTime}}</p>
                            </div>
                            <div class = "Signinsignout" style="margin-top:15px;">
                                <span>签到 : {{item.signInTime}}</span><span style="margin-left:50px;">签退 : {{item.signOutTime}}</span>
                            </div>
                            <div class = "peoplecounting-wrapper">
                                <span @click = "serveClick(index)" style="cursor:pointer">服务人数 ({{item.count}})</span>
                                <span @click = "winClick(index)" style="margin-left:50px;cursor:pointer">获评数量 ({{item.numberOfEvaluations}})</span>
                            </div>
                        </el-card>
                    </el-col>
                    </div>
                </el-card>
            </el-col>
            </el-row>
            <el-dialog :title="title" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column property="userId" align="center" label="ID" ></el-table-column>
                <el-table-column property="name" align="center" label="姓名" ></el-table-column>
                <el-table-column property="oname" align="center" label="学校"></el-table-column>
                <el-table-column property="className" align="center" label="班级"></el-table-column>
                <el-table-column style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" v-if = "Boole === true" property="comment.content" align="center" label="评论内容"></el-table-column>
            </el-table>
            </el-dialog>
        </el-main>
        </el-container>
        </el-container>
    </div>
</template>
<script>
import steamroller from "../../commonality"
import transitionTime from "../../transitionTime"
export default {
    data(){
        return{
            gridData:[],
            title:'服务人数',
            form:[
            ],
            serviceCount:'',
            dialogTableVisible:false,
            loading:false,
            Boole:false
        }
    },
    created() {
        this.List()
    },
    methods:{
        //获取初始数据
        List(){
            this.loading = true
            let user = JSON.parse(sessionStorage.getItem('user'))
            this.$api.Basemanager.message(user.baseId).then(res => {
                this.form = res.data.rows
                this.serviceCount = res.data.serviceCount
                for(let i = 0; i < res.data.rows.length; i ++){
                  let timeone = steamroller(res.data.rows[i].endTime)
                  let timetwo = transitionTime(res.data.rows[i].signInTime)
                  let timethree = transitionTime(res.data.rows[i].signOutTime)
                  this.form[i].signInTime = timetwo
                  this.form[i].signOutTime = timethree
                  this.form[i].endTime = timeone
                }
            this.loading = false
            }).catch(err => {
                console.log(err)
            })
        },
    //获评详情
    winClick(index){
        this.loading = true
        this.Boole = true
        this.gridData = []
        this.$api.Basemanager.messageList(this.form[index].reservationId).then(res => {
            if(res.code === 200){
                for(let i = 0; i<res.data.teamUsers.length; i++){
                    if(res.data.teamUsers[i].comment.status === 'passed'){
                        this.gridData.push(res.data.teamUsers[i])
                    }
                }
                this.dialogTableVisible = true
            } 
        }).catch(err => {
            console.log(err)
        })
        this.loading = false
    },
    //列表展示
    serveClick(index){
        this.loading = true
        this.Boole = false
        this.gridData = []
        this.$api.Basemanager.messageList(this.form[index].reservationId).then(res => {
            if(res.code === 200){
              this.gridData = res.data.teamUsers 
            }
            this.dialogTableVisible = true
        }).catch(err => {
            console.log(err)
        })
        this.loading = false
    },
    }
}
</script>
<style scoped>
.informationaggregation{
    width: 100%
}
.informationaggregation .box .but{
    float: right;
    padding-bottom: 15px;
}
.informationaggregation .boxes .endTime-wrapper{
    font-size:18px;
    font-weight: bold;
}
.informationaggregation .boxes .peoplecounting-wrapper{
    padding-top:15px;
}
.informationaggregation .boxes .peoplecounting-wrapper span{
    font-size: 14px;
}
.informationaggregation .boxes .name-wrapper{
    margin-bottom: 15px;
}
.informationaggregation .boxes  .Signinsignout span{
    font-size:14px;
    font-weight: bold;
}
.informationaggregation .boxes .name-wrapper p,span{
    font-size:20px;
    font-weight: bold;
}
</style>
